<template>
     <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router='true'
      :unique-opened='true'
      :collapse-transition='false'
      :collapse='iss'>
       <p class="iss" @click='suo'>|||</p>

      <el-submenu :index="item.id+''" v-for="item in menu" :key="item.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.authName}}</span>
        </template>
           <el-menu-item :index="'/'+it.path" v-for="it in item.children" :key="it.id">
            <i class="el-icon-menu"></i>
            <span slot="title">{{it.authName}}</span>
           </el-menu-item>
      </el-submenu>
    </el-menu>
</template>

<script>
import {LjhZuo} from '@/http/api.js'
export default {
    data() {
        return {
           iss:false,
           menu:[]
        };
    },
    created() {
      this.getZuo()
    },
    methods: {
      suo(){
        this.iss=!this.iss
        this.$emit('suofn',this.iss)
      },
      async getZuo(){
        const res=await LjhZuo()
          // console.log(res)
        this.menu=res
      }
      
    },
  


    computed:{

    },


    watch:{

cart: {

handler(newValue) {

},
deep: true,

immediate:true,
},
    },
};
</script>

<style scoped lang='scss'>
.el-menu{
  width: 100%;
  height: 100%;
  border-right: none
}
.iss{
  text-align: center;
  font-size:18px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  padding:0;
  margin: 0;
  cursor: pointer;
}
</style>
